<template>
  <view class="flex-col page">
    <view class="flex-col section_1">
      <view class="group">
        <text class="text">限时秒</text>
        <text class="text_1">杀</text>
      </view>
      <view class="justify-between group_1">
        <image src="../../assets/16463022812318585141.png" class="image" />
        <image src="../../assets/16463022812319856586.png" class="image_1" />
      </view>
      <view class="flex-row group_2">
        <text class="text_2">距结束</text>
        <view class="group_3 flex-col view">
          <view class="section_2"><!--*--></view>
          <text class="text_3">06</text>
        </view>
        <view class="flex-col group_4">
          <view class="section_2"><!--*--></view>
          <text class="text_3">04</text>
        </view>
        <view class="group_3 flex-col view_3">
          <view class="section_3"><!--*--></view>
          <text class="text_3">23</text>
        </view>
        <text class="text_7">:</text>
        <text class="text_8">:</text>
      </view>
    </view>
    <view class="flex-col group_5">
      <view class="flex-row equal-division">
        <view class="equal-division-item flex-col items-center group_6">
          <text class="text_9">12:00</text>
          <text class="text_11">已开枪</text>
        </view>
        <view class="equal-division-item flex-col items-center group_7">
          <text class="text_9">18:00</text>
          <text class="text_11">已开枪</text>
        </view>
        <view class="justify-between group_8">
          <view class="flex-col items-center equal-division-item_1">
            <text class="text_15">18:00</text>
            <text class="text_16">抢购中</text>
          </view>
          <view class="equal-division-item flex-col items-center">
            <text class="text_9">18:00</text>
            <text class="text_11">已开枪</text>
          </view>
        </view>
      </view>
      <view class="flex-col list">
        <view class="list-item flex-row" :key="i" v-for="(item, i) in list_BeHAtiuD">
          <image
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/621652a25a7e3f03105c7dbc/622094024fa9330011951f75/16463022786782640507.png"
            class="image_2"
          />
          <view class="right-group flex-col">
            <view class="top-group flex-col view_5">
              <view class="top-group_1">
                <text>包图网最新设计师品牌-新学期学</text>
                <text>习套餐优惠包</text>
              </view>
              <view class="bottom-group flex-row">
                <text class="text_21">¥9.9</text>
                <text class="text_23">¥128</text>
                <view class="right-text-wrapper flex-col items-end"><text>返：¥1.8</text></view>
              </view>
            </view>
            <view class="bottom-group_1 justify-between">
              <view class="left-group flex-col">
                <text>还剩1298件</text>
                <image src="../../assets/16463022812323818272.png" class="image_4" />
              </view>
              <view class="right-text-wrapper_1 flex-col items-center"><text>立即抢购</text></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
         list_BeHAtiuD: [null, null, null],
      };
    }
  }
</script>

<style lang="scss">
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.items-start {
  display: flex;
  align-items: flex-start;
}

.items-center {
  display: flex;
  align-items: center;
}

.items-end {
  display: flex;
  align-items: flex-end;
}


.page {
  background-color: rgb(245, 245, 245);
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .section_1 {
    padding: 65rpx 0 19rpx;
    border-radius: 0px 0px 40rpx 40rpx;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/621652a25a7e3f03105c7dbc/622094024fa9330011951f75/16463051041574481095.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .group {
      align-self: center;
      line-height: 34rpx;
      .text {
        color: rgb(255, 255, 255);
        font-size: 36rpx;
        line-height: 35rpx;
      }
      .text_1 {
        color: rgb(255, 255, 255);
        font-size: 36rpx;
        font-weight: 300;
        line-height: 34rpx;
      }
    }
    .group_1 {
      margin-top: 21rpx;
      .image {
        border-radius: 0 37rpx 37rpx 0;
        width: 92rpx;
        height: 74rpx;
      }
      .image_1 {
        margin-right: 30rpx;
        width: 74rpx;
        height: 74rpx;
      }
    }
    .group_2 {
      margin-top: 36rpx;
      .text_2 {
        margin: 4rpx 0 4rpx 257rpx;
        color: rgb(33, 33, 33);
        font-size: 29rpx;
        line-height: 27rpx;
        text-transform: uppercase;
      }
      .group_3 {
        color: rgb(255, 255, 255);
        font-size: 29rpx;
        line-height: 23rpx;
        letter-spacing: -0.7rpx;
        width: 45.5rpx;
        position: relative;
        .section_3 {
          background-color: rgb(49, 49, 49);
          border-radius: 4rpx;
          width: 35rpx;
          height: 34rpx;
        }
      }
      .view {
        margin-left: 3.5rpx;
      }
      .group_4 {
        margin-left: 2.5rpx;
        color: rgb(255, 255, 255);
        font-size: 29rpx;
        line-height: 23rpx;
        letter-spacing: -0.7rpx;
        width: 46.5rpx;
        position: relative;
      }
      .view_3 {
        margin-left: 2.5rpx;
      }
      .text_7 {
        margin-left: -104.5rpx;
        align-self: center;
        color: rgb(49, 49, 49);
        font-size: 29rpx;
        font-weight: 700;
        line-height: 10rpx;
        letter-spacing: -0.7rpx;
      }
      .text_8 {
        margin-left: 30.5rpx;
        align-self: center;
        color: rgb(49, 49, 49);
        font-size: 29rpx;
        font-weight: 700;
        line-height: 10rpx;
        letter-spacing: -0.7rpx;
      }
      .section_2 {
        background-color: rgb(49, 49, 49);
        border-radius: 4rpx;
        width: 34rpx;
        height: 34rpx;
      }
      .text_3 {
        position: absolute;
        left: 2rpx;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .group_5 {
    padding: 31rpx 24rpx 0;
    .equal-division {
      margin-left: 48rpx;
      margin-right: 32rpx;
      .group_6 {
        flex: 1 1 auto;
      }
      .group_7 {
        margin-left: 40rpx;
      }
      .group_8 {
        margin-left: 72rpx;
        width: 276rpx;
        .equal-division-item_1 {
          margin: 10rpx 0;
          padding: 6rpx 0 7rpx;
          background-color: rgb(255, 255, 255);
          border-radius: 10rpx;
          height: 73rpx;
          .text_15 {
            color: rgb(236, 76, 95);
            font-size: 30rpx;
            line-height: 23rpx;
          }
          .text_16 {
            margin-top: 10rpx;
            color: rgb(236, 76, 95);
            font-size: 30rpx;
            line-height: 29rpx;
          }
        }
      }
      .equal-division-item {
        padding: 16rpx 0 17rpx;
        .text_9 {
          color: rgb(36, 36, 36);
          font-size: 30rpx;
          line-height: 23rpx;
        }
        .text_11 {
          margin-top: 10rpx;
          color: rgb(36, 36, 36);
          font-size: 30rpx;
          line-height: 28rpx;
        }
      }
    }
    .list {
      margin-top: 36rpx;
      .list-item {
        background-color: rgb(255, 255, 255);
        border-radius: 10rpx;
        &:not(:first-of-type) {
          margin-top: 24rpx;
        }
        .image_2 {
          border-radius: 10rpx;
          width: 308rpx;
          height: 310rpx;
        }
        .right-group {
          margin: 20rpx 8rpx 0 32rpx;
          flex: 1 1 auto;
          .top-group {
            color: rgb(79, 95, 104);
            font-size: 24rpx;
            line-height: 42rpx;
            .top-group_1 {
              color: rgb(79, 95, 104);
              font-size: 24rpx;
              line-height: 42rpx;
            }
            .bottom-group {
              margin-top: 24rpx;
              padding: 0 3rpx;
              .text_21 {
                margin: 3rpx 0 5rpx;
                color: rgb(236, 75, 94);
                font-size: 34rpx;
                line-height: 28rpx;
              }
              .text_23 {
                margin: 10rpx 0 6rpx;
                color: rgb(179, 190, 198);
                font-size: 24rpx;
                line-height: 21rpx;
                text-decoration: line-through;
              }
              .right-text-wrapper {
                margin-left: 11rpx;
                padding: 6rpx 0;
                color: rgb(238, 90, 131);
                font-size: 24rpx;
                line-height: 21rpx;
                background-color: rgb(253, 240, 243);
                border-radius: 10rpx;
                height: 36rpx;
                border: solid 2rpx rgb(238, 88, 109);
              }
            }
          }
          .view_5 {
            color: initial;
            font-size: initial;
            line-height: initial;
          }
          .bottom-group_1 {
            margin-top: 50rpx;
            .left-group {
              margin-top: 10rpx;
              color: rgb(238, 90, 131);
              font-size: 24rpx;
              line-height: 23rpx;
              .image_4 {
                margin-top: 18rpx;
                border-radius: 8.04rpx;
                width: 156rpx;
                height: 17rpx;
              }
            }
            .right-text-wrapper_1 {
              margin-right: 8rpx;
              padding: 22rpx 0 23rpx;
              color: rgb(255, 255, 255);
              font-size: 24rpx;
              line-height: 23rpx;
              background-image: linear-gradient(
                90deg,
                rgb(241, 141, 89) 0%,
                rgb(238, 88, 86) 53%,
                rgb(238, 90, 138) 100%
              );
              border-radius: 33.04rpx;
              width: 145rpx;
              height: 67rpx;
            }
          }
        }
      }
    }
  }
}
</style>
